<template>
  <div>
    <Drawer
      v-model="value"
      width="1230"
      :styles="styles"
      draggable
      mask-closable
    >
      <div class="content-top" :showTitle="false">
        <Form ref="formValidate" :model="form" :label-width="80">
          <FormItem class="mr_24" label="采购周期:" prop="updateTime">
            <DatePicker
              class="dataPicker"
              v-model="form.updateTime"
              format="yyyy-MM-dd"
              type="daterange"
              placement="bottom-start"
              placeholder="请选择采购周期"
              transfer
              readonly
              style="width: 220px"
            ></DatePicker>
          </FormItem>
          <!-- <FormItem class="mr_24" label="供应商" prop="one">
              <Select
                v-model="form.one"
                placeholder="请选择"
                clearable
                style="width: 200px"
              >
                <Option
                  :value="item"
                  v-for="(item, index) in [1, 2, 3, 4]"
                  :key="index"
                  >{{ item }}</Option
                >
              </Select>
            </FormItem> -->
        </Form>
      </div>
      <cus-card class="bd" :showTitle="false">
        <Table border :loading="loading" :columns="columnsOne" :data="dataOne">
        </Table>
        <div class="cus_page">
          <cus-page
            :data="pages"
            class="mt_20"
            @pageChange="postPurchasingPlansDetailApi()"
            simple
          ></cus-page>
        </div>
      </cus-card>
      <cus-card class="bd mt_20" :showTitle="true" title="食物定量分析详情">
        <div class="btnBox flex mb_10">
          <h3>重新计算(人):</h3>
          &nbsp;&nbsp;&nbsp;
          <Input
            v-model="strength"
            @on-search="onSearch()"
            maxlength="7"
            search
            enter-button
            placeholder="请输入人数"
            style="width: 200px"
          />
        </div>
        <Table border :columns="columnsTwo" :data="dataTwo"> </Table>
      </cus-card>
    </Drawer>
  </div>
</template>
  
<script>
import {
  postPurchasingPlansDetail,
  postPurchasingPlansFoodStatistic,
} from "@/api/organ/manager";

export default {
  components: {},
  data() {
    return {
      loading: false,
      value: false,
      ruleValidate: {},
      form: {
        updateTime: [], // 采购周期
      },
      periodId: null,
      strength: null, // 重新计算人数
      dataOne: [],
      columnsOne: [
        {
          title: "序号",
          width: 70,
          type: "index",
          align: "center",
        },
        {
          title: "商品名称",
          key: "productName",
          align: "center",
        },
        // {
        //   title: "采购重量",
        //   key: "weight",
        //   align: "center",
        // },
        {
          title: "采购数量",
          key: "qty",
          align: "center",
        },
        {
          title: "计量单位",
          key: "specifications",
          align: "center",
        },
        {
          title: "单位重量",
          key: "unitWeight",
          align: "center",
        },
        {
          title: "价格",
          key: "price",
          align: "center",
        },
        {
          title: "金额",
          key: "amount",
          align: "center",
        },
        {
          title: "供应商",
          key: "supplyName",
          align: "center",
        },
      ],
      dataTwo: [
        {
          type: "标准",
          one: "100",
          two: "200",
        },
        {
          type: "实际",
          one: "100",
          two: "200",
        },
      ],
      columnsTwo: [
        {
          title: "食物类别",
          key: "type",
          align: "center",
        },
        {
          title: "粮食（克）",
          key: "cereals",
          align: "center",
        },
        {
          title: "畜肉（克）",
          key: "meat",
          align: "center",
        },
        {
          title: "禽肉（克）",
          key: "poultry",
          align: "center",
        },
        {
          title: "禽蛋",
          key: "eggs",
          align: "center",
        },
        {
          title: "鱼虾（克）",
          key: "fish",
          align: "center",
        },
        {
          title: "牛奶（克）",
          key: "milk",
          align: "center",
        },
        {
          title: "大豆（克）",
          key: "soybean",
          align: "center",
        },
        {
          title: "蔬菜（克）",
          key: "vegetables",
          align: "center",
        },
      ],
      styles: {
        height: "calc(100% - 55px)",
        overflow: "auto",
        paddingBottom: "53px",
        position: "static",
      },
      pages: {
        page: 1,
        pageSize: 5,
        pageTotal: 0,
      },
    };
  },
  mounted() {},
  methods: {
    show() {
      this.value = true;
      this.postPurchasingPlansDetailApi();
      this.postPurchasingPlansFoodStatisticApi();
    },
    onSearch() {
      if (this.strength < 1) {
        this.$Message.info("人数必须大于0人!");
      } else if (!this.$cu.test.digits(this.strength)) {
        this.$Message.info("人数必须为整数!");
      } else {
        this.postPurchasingPlansFoodStatisticApi();
      }
    },
    postPurchasingPlansDetailApi() {
      this.loading = true;
      return new Promise((resolve) => {
        let params = {
          currentPage: this.pages.page,
          pageSize: this.pages.pageSize,
          periodId: this.periodId,
          supplyId: 0,
        };
        postPurchasingPlansDetail(params).then((res) => {
          this.loading = false;
          if (res.code === 1) {
            this.dataOne = res.data.list;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    postPurchasingPlansFoodStatisticApi() {
      return new Promise((resolve) => {
        let params = {
          periodId: this.periodId,
          strength: this.strength,
        };
        postPurchasingPlansFoodStatistic(params).then((res) => {
          if (res.code === 1) {
            console.log(res);
            if(res.data.purchasingFoodStatisticVos.length > 0) this.dataTwo = res.data.purchasingFoodStatisticVos;
            this.strength = res.data.strength;
            resolve();
          }
        });
      });
    },
  },
  component: {},
};
</script>
<style lang="less" scoped>
.content-top {
  padding: 24px 0 0 24px;
}
::v-deep .ivu-table-wrapper-with-border {
  border-radius: 6px;
}
.bd {
  border: 1px solid #e3e8ee;
  padding: 10px;
}
</style>